<template>
  <div>
    <a-modal v-model:open="modalOpen" title="拒绝" width="50%" :footer="null">
      <a-space direction="vertical" style="width: 100%" :size="16">
        <a-form
          :model="formData"
          ref="ruleForm"
          labelAlign="left"
          :label-col="{ span: 3 }"
          :wrapper-col="{ span: 16 }"
        >
          <a-form-item
            label="拒绝原因"
            name="content"
            :rules="[{ required: true, message: '拒绝原因不能为空!' }]"
          >
            <a-textarea
              :rows="6"
              v-model:value="formData.content"
              placeholder="输入拒绝原因"
              :maxlength="500"
            />
          </a-form-item>
        </a-form>
        <div class="modal-but-layout">
          <a-space wrap>
            <a-popconfirm
              title="您是否要数据重置?"
              ok-text="是"
              cancel-text="否"
              @confirm="handleReset"
            >
              <a-button>重置</a-button>
            </a-popconfirm>
            <a-button type="primary" @click="submit">确认</a-button>
          </a-space>
        </div>
      </a-space>
    </a-modal>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { reviewShopOrderAfter } from "@/api/order";
import { message } from "ant-design-vue";
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue'
const modalOpen = ref(false)

const formData = ref({
  id:null,
  content: '',
})

const open = (id) => {
  formData.value.id = id
  modalOpen.value = true
}
const ruleForm = ref(null)
function handleReset () {
  formData.value.content = ''
  ruleForm.value.resetFields()
}
const emits = defineEmits('refreshList')
const submit = () => { 
  const params = {
    id: formData.value.id,
    reason: formData.value.content,
    state: 0
  }
  reviewShopOrderAfter(params).then(res => { 
    message.info("拒绝成功");
    modalOpen.value = false
    emits('refreshList',true)
  })
}

defineExpose({ modalOpen, open })
</script>

<style lang="less">
.img-item {
  width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;

  .img-label {
    margin-top: 6px;
    color: #9599a5;
    font-size: 12px;
  }
}

.modal-but-layout {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
</style>
